<template>
  <div>
    <h3 style="margin-top: 65px">认证级别</h3>
    <el-row type="flex" justify="space-around" style="margin-top: 20px">
      <el-col :span="6">
        <el-button type="primary" @click="certificateLevel(1)" :disabled="(certStatus === 1 || certStatus === 2)"
          >一级认证</el-button
        >
      </el-col>
      <el-col :span="6">
        <el-button type="primary" @click="certificateLevel(2)" :disabled="(certStatus === 1 || certStatus === 2)"
          >二级认证</el-button
        >
      </el-col>
      <el-col :span="6">
        <el-button type="primary" @click="certificateLevel(3)" :disabled="(certStatus === 1 || certStatus === 2)"
          >三级认证</el-button
        >
      </el-col>
    </el-row>
    <h3 style="margin-top: 65px">认证申请信息</h3>
    <el-table :data="firstData" style="margin-top: 20px">
      <el-table-column label="认证级别" prop="certLevel"></el-table-column>
      <el-table-column
        label="认证专业类"
        prop="certProfessionType"
      ></el-table-column>
      <el-table-column label="开始时间" prop="startTime"></el-table-column>
      <el-table-column label="认证阶段" prop="certStage">
        <template slot-scope="scope">
          {{ getStage(scope.row.certStage) }}
        </template>
      </el-table-column>
      <el-table-column label="认证结果" prop="certStatus" align="center">
        <template slot-scope="scope">
          {{ getStatus(scope.row.certStatus) }}
        </template>
      </el-table-column>
      <el-table-column label="操作">
        <template slot-scope="scope">
          <el-button
            type="text"
            size="small"
            @click="getCertInfo(scope.row.id, false)"
            >编辑</el-button
          >
          <el-button
            type="text"
            size="small"
            @click="getCertInfo(scope.row.id, true)"
            >查看</el-button
          >
        </template>
      </el-table-column>
    </el-table>
    <!-- 弹框 -->
    <el-dialog :visible.sync="dialogVisible" :title="titleName">
      <el-form label-width="100px" :model="firstForm" :rules="rules" ref="dataForm">
        <el-form-item label="学校" prop="school">
          <el-col :span="10">
            <el-input v-model="firstForm.school" :disabled="isEdit"></el-input>
          </el-col>
        </el-form-item>
        <el-form-item label="所属学院" prop="academy">
          <el-col :span="10">
            <el-input v-model="firstForm.academy" :disabled="isEdit"></el-input>
          </el-col>
        </el-form-item>
        <el-form-item label="认证专业" prop="certProfession">
          <el-col :span="10">
            <el-input v-model="firstForm.certProfession" :disabled="isEdit"></el-input>
          </el-col>
        </el-form-item>
        <el-form-item label="认证专业类" prop="certProfessionType">
          <el-col :span="10">
            <el-input v-model="firstForm.certProfessionType" :disabled="isEdit"></el-input>
          </el-col>
        </el-form-item>
        <el-form-item label="专业负责人" prop="certCharge">
          <el-col :span="10">
            <el-input v-model="firstForm.certCharge" :disabled="isEdit"></el-input>
          </el-col>
        </el-form-item>
        <el-form-item label="上传认证文件">
          <ossUpload @setCertAttachmentId="setCertAttachmentId" ref="ossRef" :isdisabled="isEdit"></ossUpload>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer" v-if="!isEdit">
        <el-button @click="cancel">取 消</el-button>
        <el-button type="primary" @click="submit">提交认证 </el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import Vue from "vue";
import ossUpload from "../../../components/ossUpload.vue"
export default {
  name: "firstStep",
  components: {
    ossUpload
  },
  data() {
    return {
      firstData: [],
      firstForm: {
        academy: "", // 学院
        certAttachmentId: 1, // 申请证书id
        certCharge: "", // 专业负责人
        certLevel: 1, // 申请等级
        certProfession: "", // 认证专业
        certProfessionType: "", // 认证专业类
        school: "" // 学校
      },
      dialogVisible: false,
      page: {
        pageNum: 1,
        pageSize: 10
      },
      headers: {
        token: Vue.cookie.get("token")
      },
      isEdit: false,
      rules: {
        school: [{ required: true, message: '请输入学校名称', trigger: 'blur' }],
        academy: [{ required: true, message: '请输入学院名称', trigger: 'blur' }],
        certProfession: [{ required: true, message: '请输入专业名称', trigger: 'blur' }],
        certProfessionType: [{ required: true, message: '请输入专业类名称', trigger: 'blur' }],
        certCharge: [{ required: true, message: '请输入专业负责人名称', trigger: 'blur' }],
      }
    };
  },
  props: {
    certStatus: '',
    certStage: ''
  },
  created() {
    this.getCert();
  },
  methods: {
    certificateLevel(val) {
      this.firstForm.certLevel = val;
      this.dialogVisible = true;
    },
    // 提交请求和编辑请求
    submit() {
      this.$refs['dataForm'].validate((valid) => {
        if(valid) {
       if (this.certStatus === 3 || this.certStage === 5 || !this.certStatus) {
        this.$http({
          url: this.$http.cert("/cert"),
          method: "post",
          data: this.$http.adornData(
            {
              ...this.firstForm
            },
            false
          )
        })
          .then(() => {
            this.getCert();
            this.$message.success("提交认证成功");
            this.$emit('getCertStatus')
            this.dialogVisible = false;
          })
          .catch(() => {
            this.$message.error("提交认证失败");
          }).finally(() => {
            console.log("来到$emit");
          })
      } else {
        this.$http({
          url: this.$http.cert("/cert"),
          method: "put",
          data: this.$http.adornData(
            {
              ...this.firstForm
            },
            false
          )
        })
          .then(() => {
            this.getCert();
            this.$message.success("编辑认证成功");
            this.dialogVisible = false;
          })
          .catch(() => {
            this.$message.error("编辑认证失败");
          });
      }
        }else {
          this.$message.error("存在必填项未填")
        }

      })
    },
    // 取消
    cancel() {
      this.isEdit = false;
      Object.keys(this.firstForm).forEach(key => (this.firstForm[key] = ""));
      this.dialogVisible = false;
    },
    // 查看详情
    getCertInfo(id, val) {
      this.isEdit = val;
      this.$http({
        url: this.$http.cert(`/cert/${id}`),
        method: "get"
      }).then(res => {
        this.firstForm.certLevel = res.data.data.certLevel;
        this.firstForm = res.data.data;
        this.$nextTick(()=> {
          this.$refs.ossRef.getUrl(this.firstForm.certAttachmentId)
        })
        this.dialogVisible = true;
      });

    },
    // 获取该页数据
    getCert() {
      this.$http({
        url: this.$http.cert("/certPage"),
        method: "get",
        params: this.$http.adornParams(
          {
            ...this.page
          },
          false
        )
      }).then(res => {
        this.firstData = res.data.data.records;
      });
    },
    getStatus(val) {
      let statusName = "";
      switch (val) {
        case 1:
          statusName = "认证中";
          break;
        case 2:
          statusName = "认证通过";
          break;
        case 3:
          statusName = "认证驳回";
          break;
      }
      return statusName;
    },
    setCertAttachmentId(val) {
      this.firstForm.certAttachmentId = val
    },
     getStage(val) {
      let statusName = "";
      switch (val) {
        case 1:
          statusName = "认证申请";
          break;
        case 2:
          statusName = "专业自评";
          break;
        case 3:
          statusName = "进校考察";
          break;
        case 4:
          statusName = "结论认定";
          break;
        case 5:
          statusName = "整改提高";
          break;
      }
      return statusName;
    }
  },
  computed: {
    titleName() {
      return "您正在认证" + this.firstForm.certLevel + "级";
    }
  }
};
</script>

<style></style>
